<template>
  <view class="item_block" @click="checkIt(props.item)">
    <view class="top">
      <view class="img_box">
        <image class="img" mode="scaleToFill" src="../../assets/images/bank/bank.png"></image>
      </view>
      <view class="info">
        <view class="first">
          <text>{{ props.item.bankName }}</text>
          <text>{{ transformCode(props.item.accountNo) }}</text>
        </view>
        <view class="second">
          <text class="account_name">{{ props.item.accountName }}</text>
          <view v-if="props.item.accountType == 1" class="account_type geren">个人账户</view>
          <view v-else class="account_type qiye">企业账户</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view>
        <nut-checkbox v-model="item.default" label="复选框" @change="setDefaultAccount(item)">设为默认账户</nut-checkbox>
      </view>
      <span class="set">
          <view class="icons" @click.stop="editAccount(item)">
            <image class="img" src="../../assets/images/index/icon_edit.png"></image>
            <text>编辑</text>
          </view>
          <view class="icons" style="margin-left: 60rpx" @click.stop="delAccount(item)">
            <image class="img" src="../../assets/images/index/icon_delete.png"></image>
            <text>删除</text>
          </view>
        </span>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro,{useRouter} from "@tarojs/taro"
import { ref, defineProps, defineEmits } from 'vue'
import {Del, Edit} from "@nutui/icons-vue-taro";
const props = defineProps<{
  item: any
  index: number
}>()
const emit = defineEmits(['delAccount','editAccount','setDefaultAccount']);

function delAccount(item: any) {
  emit('delAccount', item)
}
function editAccount(item: any) {
  emit('editAccount', item)
}
function setDefaultAccount(item: any) {
  emit('setDefaultAccount', item)
}
function transformCode (val) {
  return val || ''
  // if(!val){
  //   return ''
  // }
  // else {
  //   return val.substr(0,4) + ' **** **** ' + val.substr(-4)
  // }
}
function checkIt(item){
  if(useRouter().params.type === 'select'){
    let pages = Taro.getCurrentPages()
    let prevPage = pages[pages.length - 2]
    prevPage.setData({info:item})
    Taro.navigateBack()
  }
}
</script>

<style lang="scss">
.item_block {
  width: 700rpx;
  margin-left: 25rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-top: 16rpx;
  overflow: hidden;
  .top {
    width: 100%;
    padding: 0 32rpx;
    height: 144rpx;
    background: linear-gradient(108deg, #CCE0FF 0%, #FFFFFF 100%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .img_box {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;
      background-color: #fff;
      width: 76rpx;
      height: 76rpx;
      .img {
        width: 56rpx;
        height: 32rpx;
      }
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(100% - 92rpx);
      .first {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #252525;
        >text:first-child {
          width: 230rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .second {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        color: #252525;
        margin-top: 4rpx;
        .account_name {
          width: 300rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .account_type {
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          width: 112rpx;
          border-radius: 18rpx;
          font-size: 22rpx;
          &.geren { color: #0966ff; background-color: rgba(9, 102, 255, 0.16); }
          &.qiye { color: #0ec365; background-color: rgba(14, 195, 101, 0.16); }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    padding: 0 32rpx;
    .nut-checkbox__label {
      margin-left: 10rpx;
      font-size: 24rpx;
      color: #666666;
    }
    .set {
      display: flex;
      align-items: center;
      color: #666;
      .icons {
        display: flex;
        align-items: center;
        .img {
          width: 32rpx;
          height: 32rpx;
        }
        text {
          margin-left: 12rpx;
        }
      }
    }
  }
}
</style>
